<template>
  <view class="wrapper u-p-b-50">
    <view class="search row flex-center pd_l_30 pd_r_30" style="justify-content: space-between;z-index: 10">
      <u-input v-model="keyWord"
               :clearable="false"
               confirm-type="search"
               @confirm="search"
               class="flex-1 fon4-24 pd_l_30 pd_r_30" :height="50" placeholder="请输入课程名称进行搜索"/>
      <view class="btn color-active" @click="search">搜索</view>
    </view>
    <view class="list_wrp u-p-l-40 u-p-r-40" v-if="news.length">
      <navigator :url="`/pages/curriculum/detail?id=${item.id}`" class="item_list"
                 v-for="(item, index) in news"
                 :key="index"
      >
        <view class="top">
          <image class="item_img" :src="item.titlePage"></image>
        </view>
        <view class="bottom u-p-t-14 u-p-b-14">
          <!--<view class="item_title eclipse-1 u-p-t-20">{{item.videoTitle}} </view>-->
          <view class="item_content u-p-l-30">{{ item.speaker }} <text class="u-p-l-20">{{item.speakerIntroduction}}</text></view>
          <view class="item_date u-text-right u-p-r-30">
            <u-icon name="eye" size="28" color="#999"></u-icon>
            <text class="u-p-l-10">{{item.lookNum}}</text>
          </view>
        </view>
      </navigator>
    </view>
    <view class="list_wrp u-p-t-60 u-m-t-60" v-else>
      <u-empty text="暂无视频" mode="list"></u-empty>
    </view>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {getCurrentFullPath} from "../../util/util";

  export default {
    name: "",
    data() {
      return {
        keyWord: '',
        news: []
      }
    },

    onShow() {
      this.getList()
    },

    methods: {
      getList(videoTitle = '') {
        request({
          url: '/wx/get/CompassVideoClassList/' + videoTitle,
          data: {videoTitle: videoTitle}
        }).then(res => {
          this.news = res.data
        })
      },

      search() {
        this.getList(this.keyWord)
      },

      jump() {

      }
    },

    onShareAppMessage(res) {
      return {
        path: getCurrentFullPath()
      }
    }
  }
</script>

<style scoped lang="scss">
  .search {
    background: rgb(249, 249, 249);
    padding-top: 20upx;
    padding-bottom: 20upx;
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    .flex-1 {
      background: #fff;
      border-radius: 25upx;
      margin-right: 20upx;
    }
  }
  .item_list {
    margin-bottom: 30upx;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .top {
      width: 100%;
      height: 286upx;
      .item_img {
        width: 100%;
        height:100%;
      }
    }
    .bottom {
      display: flex;
      .item_title {
        color: #101010;
        font-size: 28upx;
      }
      .item_content {
        color: #101010;
        font-size: 28upx;
        flex: 1;
      }
      .item_date {
        color: #999;
        font-size: 22upx;
        width: 180upx;
      }
    }
  }
  .list_wrp {
    padding-top: 104upx;
  }
</style>
